<script setup lang="ts">
defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: $t('activity.common.voce_venceu'),
  },
  desc: {
    type: String,
    default: $t('activity.common.voce_venceu_desc'),
  },
  btn: {
    type: String,
    default: $t('activity.common.confirmar'),
  },
  icon: {
    type: String,
    default: '/images/activity/common/Coin_Bg 1.png',
  },
  amount: {
    type: [String, Number],
    default: '0',
  },
})
const emit = defineEmits(['close', 'sure'])

function beforeClose() {
  emit('close')
}

function handleSure() {
  emit('sure')
}
</script>

<template>
  <van-dialog :show="show" title=" " destroy-on-close class-name="custom-dialog" overlay-class="activity-dialog-overlay"
    teleport="body" :show-confirm-button="false" :show-cancel-button="true" @cancel="beforeClose">
    <div class="title">
      {{ title }}
    </div>
    <div class="icon">
      <img :src="icon" alt="">
    </div>
    <div class="amount">
      {{ apo.utils.formateAmountWithSymbol(amount || 0) }}
    </div>
    <div class="desc">
      {{ desc }}
    </div>
    <div v-click-move class="btn" @click="handleSure">
      {{ btn }}
    </div>
  </van-dialog>
</template>

<style scoped lang="scss">
.title {
  background: linear-gradient(180deg, #fff 11.54%, #ffe100 41.35%, #f80 69.23%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.5rem;
  text-align: center;
  font-weight: 700;
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
}

.icon {
  text-align: center;
  margin-bottom: 0.3rem;

  img {
    width: 3.2rem;
  }
}

.amount {
  font-size: 0.5rem;
  color: #fdd528;
  text-align: center;
}

.desc {
  font-size: 0.3rem;
  color: #ffcef4;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  padding: 0 0.3rem;
}

.btn {
  width: 5rem;
  height: 1rem;
  border-radius: 1rem;
  line-height: 1rem;
  background-color: #fd66b1;
  margin: 0 auto;
  font-size: 0.5rem;
  color: #fff;
  text-align: center;
  margin-bottom: 0.7rem;
}
</style>
